<template>
  <div class="operation-menu-wrapper" :class="'file-type-' + fileType().current()">
    <a-button-group class="operate-group">
      <a-button type="primary" icon="upload" id="uploadFileId" @click="upload()"
                v-if="fileType().isAll()">上传
      </a-button>
      <a-button type="primary" icon="file" @click="addFolder()" v-if="fileType().isAll()">新建文件夹
      </a-button>
      <a-button v-show="false" type="primary" :disabled="!selectionFile.length" icon="delete"
                @click="deleteSelectedFile()">批量删除
      </a-button>
      <a-button v-show="false" type="primary" :disabled="!selectionFile.length" icon="download"
                @click="recoverSelectedFile()" v-if="fileType().isRecycle()">批量恢复
      </a-button>
      <a-button v-show="false" type="primary" :disabled="!selectionFile.length" icon="rank"
                @click="moveSelectedFile()" v-if="fileType().isAll()">批量移动
      </a-button>
      <!--            <a-button  icon="a-icon-document-copy">拷贝</a-button>-->
      <a-button v-show="false" type="primary" :disabled="!selectionFile.length" icon="download" style="margin: 0"
                @click="downloadSelectedFile()" v-if="fileType().isNotRecycle()">批量下载
      </a-button>
    </a-button-group>

    <!-- 全局搜素文件 -->
    <a-input-search @search="handleSearchInputChange"  placeholder="搜索您的文件"  @clear="$emit('getTableDataByType')" v-model="searchFile.filename" class="select-file-input"  />
<!--    <a-input-->
<!--      v-if="fileType().isAll()"-->
<!--      class="select-file-input"-->
<!--      v-model="searchFile.filename"-->
<!--      placeholder="搜索您的文件"-->
<!--      maxlength="255"-->
<!--      :clearable="true"-->
<!--      @change="handleSearchInputChange"-->
<!--      @clear="$emit('getTableDataByType')"-->
<!--      @keyup.enter.native="handleSearchInputChange(searchFile.filename)"-->
<!--    >-->
<!--      <i slot="prefix" class="a-input__icon a-icon-search" title="点击搜索" @click="handleSearchClick"></i>-->
<!--    </a-input>-->


<!--    &lt;!&ndash; 批量操作 &ndash;&gt;-->
<!--    <a-button-->
<!--      class="batch-opera-btn"-->
<!--      :type="batchOperate ? 'primary' : ''"-->
<!--      icon="a-icon-finished"-->
<!--      v-if="fileModel().isGrid()"-->
<!--      @click="changeBatchOperate()"-->
<!--    >-->
<!--      {{ batchOperate ? '取消批量操作' : '批量操作' }}-->
<!--    </a-button>-->


<!--    &lt;!&ndash; 文件展示模式 &ndash;&gt;-->
<!--    <div class="change-file-model">-->
<!--      <a-radio-group default-value="0" button-style="solid" v-model="fileGroupLable" @change="changeFileDisplayModel">-->
<!--        <a-radio-button value="0"><i class="a-icon-tickets"></i> 列表</a-radio-button>-->
<!--        <a-radio-button value="1"><i class="a-icon-s-grid"></i> 网格</a-radio-button>-->
<!--        &lt;!&ndash;        <a-radio-button :label="2" v-if="fileType().isImage()"><i class="a-icon-date"></i> 时间线</a-radio-button>&ndash;&gt;-->
<!--      </a-radio-group>-->
<!--    </div>-->

<!--    &lt;!&ndash; 选择表格列 &ndash;&gt;-->
<!--    <SelectColumn class="select-column" v-if="fileModel().isTable()"></SelectColumn>-->

    <!-- 多选文件下载，页面隐藏 -->
    <a
      target="_blank"
      v-for="(item, index) in selectionFile"
      :key="index"
      :href="getDownloadPath(item.id)"
      :download="item.filename + '.' + item.extension"
      :title="'downloadLink' + index"
      :ref="'downloadLink' + index"
    ></a>
    <!--    新建文件夹-->
    <mkdir ref="mkdir" @ok="success"></mkdir>
    <upload-modal ref="upload" :path="filePath().current()" :depart-file="false" @ok="success"></upload-modal>
  </div>
</template>

<script>
import {
  batchDeleteFile, batchRecoverRecycle, batchDeleteRecoveryFile, makeDir
} from '@/api/file'
// import SelectColumn from './SelectColumn'
import Mkdir from './Mkdir'
import UploadModal from './UploadModal'


export default {
  name: 'OperationMenu',
  props: {
    selectionFile: Array,
    operationFile: Object,
    batchOperate: Boolean //  批量操作模式
  },
  // SelectColumn,
  components: {
     Mkdir,UploadModal
  },
  data() {
    return {
      // 文件搜索数据
      searchFile: {
        filename: ''
      },
      fileTree: [],
      batchDeleteFileDialog: false,
      fileGroupLable: this.FILE_MODEL.TABLE, //  文件展示模式
    }
  },
  computed: {
    //  上传文件组件参数
    uploadFileData: {
      get() {
        let data = {
          folderId: this.filePath().current(),
          isDir: false
        }
        if (!data.folderId) {
          delete data.folderId
        }
        return data;
      },
      set() {
        return {
          folderId: this.ROOT_PATH,
          isDir: false
        }
      }
    },
  },
  watch: {},
  mounted() {
    console.log(this.FILE_MODEL.TABLE)

    this.fileGroupLable = this.fileModel().current()
    this.$bus.$on('refreshList', () => {
      this.$emit('getTableDataByType')
    })
    this.$bus.$on('refreshStorage', () => {
      this.$store.dispatch('showStorage')
    })
  },
  methods: {
    success() {
      this.$emit('getTableDataByType')
      this.$store.dispatch('fetchPathTreeMap')
    },
    upload() {
      // 打开文件选择框
      this.$refs.upload.show();
    },
    //  新建文件夹按钮：打开模态框
    addFolder() {
      this.$refs.mkdir.show();

    },
    //  新建文件夹模态框-确定按钮
    createFolder() {
      // const that = this;
      // if (filename === null || filename === undefined || filename === '') {
      //   throw new Error("文件名不能为空")
      // }
      // let data = {
      //   name: filename,
      // }
      // if (this.filePath().current()) {
      //   data.pid = this.filePath().current()
      // }
      // makeDir(data).then((res) => {
      //   if(res.success){
      //     that.$message.success(res.message);
      //     // that.$emit('ok');
      //   }else{
      //     that.$message.warning(res.message);
      //   }
      // }).catch(err => this.$message.warning(err.msg));
    },

    //  批量操作-删除按钮
    deleteSelectedFile() {
      let data = {
        userFileIds: this.selectionFile.flatMap(row => row.id)
      }
      let deleteApi;
      if (this.fileType().isNotRecycle()) {
        deleteApi = batchDeleteFile
      } else {
        deleteApi = batchDeleteRecoveryFile
      }
      //  批量删除接口
      deleteApi(data).then(() => {
        this.$message({
          message: "文件删除成功",
          type: 'success'
        })
        // this.$emit('getTableDataByType')
      }).catch(err => {
        console.error(err)
        this.$message.error("系统忙，删除失败")
      })
    },
    recoverSelectedFile() {
      let data = {
        userFileIds: this.selectionFile.flatMap(row => row.id)
      }
      //  批量恢复接口
      batchRecoverRecycle(data).then(() => {
        this.$message({
          message: "删除文件已恢复",
          type: 'success'
        })
        this.$emit('getTableDataByType')
      }).catch(err => {
        console.error(err)
        this.$message.error("系统忙，恢复失败")
      })
    },
    //  批量操作-移动按钮
    moveSelectedFile() {
      this.$emit('setMoveFileDialogData', true, true)
    },
    //  批量操作：下载按钮
    downloadSelectedFile() {
      for (let i = 0; i < this.selectionFile.length; i++) {
        let name = 'downloadLink' + i
        this.$refs[name][0].click()
      }
    },
    handleSearchInputChange(value) {
      if (value === '') {
        this.$emit('getTableDataByType')
      } else {
        this.$emit('getSearchFileList', value)
      }
    },
    // 图片网格模式下 - 批量操作切换
    changeBatchOperate() {
      this.$emit('update:batchOperate', !this.batchOperate)
    },
    // 切换文件查看模式
    changeFileDisplayModel(event) {
      this.$store.commit('changeFileModel', this.fileGroupLable)
    },
    handleSearchClick() {
      this.$emit('getSearchFileList', this.searchFile.filename)
    },
  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';

.operation-menu-wrapper.file-type-6 {
  margin: 8px 0;
  justify-content: flex-end;
}

.operation-menu-wrapper {
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.operate-group {
  flex: 1;
  align-items: center;
}


.change-image-model,
.change-file-model {
  margin-right: 8px
}


.batch-opera-btn {
  margin-right: 8px
}


.select-file-input {
  margin-right: 8px;
  width: 200px;

  .a-icon-search {
    cursor: pointer;
    font-size: 16px;

    &:hover {
      color: primary;
    }
  }
}

.select-column {
  width: 230px;
  //padding-top: 8px;
}
</style>
